@use 'sass:map';

// 主题配置
$primary: #0068B7;
$primary-dark: #4096ff;
$success: #E5F8E2;
$success-dark: #00b42a;
$warning: #FFF5DF;
$warning-dark: #ff7d00;
$danger: #E60012;
$danger-dark: #f53f3f;
$info: #42b8dd;
$info-dark: #86909c;

$primarySelect: #004D95;

// 引入Element Plus样式
@use 'element-plus/theme-chalk/src/index.scss' as *;

// 自定义样式
.el-button--danger:hover, 
.el-button--danger:focus {
  background-color: #FF6767;
  border-color: #FF6767;
}

.el-button--danger:active {
  background-color: #C70010;
  border-color: #C70010;
}

.el-button--danger.is-disabled,  
.el-button--danger.is-disabled:hover {
  background-color: #FFC8C8;
  border-color: #FFC8C8;
}

.el-button.is-plain:hover {
  border-color: #0071D9;
}

// 全局主题变量 - 浅色模式默认值
:root { 
  --el-theme: light;
  --el-bg-color: #ffffff;
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-text-color-secondary: #909399;
  --el-border-color: #dcdfe6;
  --el-card-bg-color: #ffffff;
  --el-color-primary: #0068B7;
  --el-color-success: #E5F8E2;
  --el-color-warning: #FFF5DF;
  --el-color-danger: #E60012;
  --el-color-error: #E60012;
  --el-color-info: #42b8dd;
}

// 深色模式样式
:root.dark { 
  --el-theme: dark;
  --el-bg-color: #1a1a1a;
  --el-text-color-primary: #ffffff;
  --el-text-color-regular: #e5e5e5;
  --el-text-color-secondary: #a3a3a3;
  --el-border-color: #333333;
  --el-card-bg-color: #2c2c2c;
  --el-color-primary: #4096ff;
  --el-color-success: #00b42a;
  --el-color-warning: #ff7d00;
  --el-color-danger: #f53f3f;
  --el-color-error: #f53f3f;
  --el-color-info: #86909c;
}

// 浅色模式样式
:root.light { 
  --el-theme: light;
  --el-bg-color: #ffffff;
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-text-color-secondary: #909399;
  --el-border-color: #dcdfe6;
  --el-card-bg-color: #ffffff;
  --el-color-primary: #0068B7;
  --el-color-success: #E5F8E2;
  --el-color-warning: #FFF5DF;
  --el-color-danger: #E60012;
  --el-color-error: #E60012;
  --el-color-info: #42b8dd;
}

// 深色模式下的Element Plus组件样式覆盖
:root.dark {
  // 按钮样式
  .el-button {
    background-color: #2c2c2c;
    border-color: #333333;
    color: #ffffff;
    
    &:hover {
      background-color: #3a3a3a;
      border-color: #4096ff;
    }
    
    &.el-button--primary {
      background-color: #4096ff;
      border-color: #4096ff;
      color: #ffffff;
      
      &:hover {
        background-color: #1677ff;
        border-color: #1677ff;
      }
    }
  }
  
  // 卡片样式
  .el-card {
    background-color: #2c2c2c;
    border-color: #333333;
    color: #ffffff;
    
    .el-card__header {
      border-bottom-color: #333333;
    }
  }
  
  // 开关样式
  .el-switch {
    .el-switch__core {
      background-color: #333333;
    }
    
    &.is-checked .el-switch__core {
      background-color: #4096ff;
    }
  }
  
  // 消息提示样式
  .el-message {
    background-color: #2c2c2c;
    border-color: #333333;
    color: #ffffff;
  }
}
